import { Checkbox, Col, Row } from 'antd';
import type { CheckboxChangeEvent } from 'antd/es/checkbox';
import type { CheckboxValueType } from 'antd/es/checkbox/Group';
import React, { useEffect } from 'react';
import AgentService from '@/modules/Agent';
import styled from '@emotion/styled';
import { useTranslation } from 'react-i18next';

interface ICollectVariable {
	errorMessage?: string;
	onChangeVariablesList: (e: CheckboxValueType[]) => void;
	onCheckVariablesListAllChange: (e: CheckboxChangeEvent) => void;
	checkVariablesListAll: boolean;
	checkedVariablesList?: CheckboxValueType[];
}

const VariableName = styled.p`
	padding: 0;
	margin: 0;
	font-weight: 400;
	color: #202020;
`;

const VariableDesc = styled.p`
	padding: 0;
	margin: 0;
	font-weight: 400;
	color: #666666;
`;

const CollectVariableTitle = styled.span`
	display: inline-block;
	font-size: 13px;
	color: #202020;
	padding-bottom: 8px;
`;

const CollectVariable = (props: ICollectVariable) => {
	const { t } = useTranslation();
	const { errorMessage = '', onChangeVariablesList, checkedVariablesList, onCheckVariablesListAllChange, checkVariablesListAll } = props;

	return (
		<div className="collect-variable-wrapper">
			<CollectVariableTitle>{t('select-collect-variable')}</CollectVariableTitle>
			<div className="collect-check-group">
				<Checkbox.Group onChange={e => onChangeVariablesList(e)} style={{ width: '100%' }} value={checkedVariablesList}>
					<Row>
						{AgentService.collectionVariable.map((item, index) => (
							<Col span={24} key={item.id} className="collect-check-col">
								<Checkbox value={item.id}>
									<VariableName>{t('variable-name') + '：' + item.key}</VariableName>
									<VariableDesc> {t('variable-description') + '：' + item.desc}</VariableDesc>
								</Checkbox>
							</Col>
						))}
					</Row>
				</Checkbox.Group>
			</div>

			<div className="collect-check-all">
				<Checkbox onChange={e => onCheckVariablesListAllChange(e)} checked={checkVariablesListAll}>
					{t('select-all')}
				</Checkbox>
			</div>

			{errorMessage ? (
				<p className="error-message" style={{ color: '#f8646a' }}>
					{errorMessage}
				</p>
			) : undefined}
		</div>
	);
};

export default CollectVariable;
